<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物篮</title>
    <link rel="stylesheet" href="/lib/bootstrap4/bootstrap-4.6.0-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/basket.css">
</head>
<body>
      <!-- 头部 -->  
      <header></header>


<!-- 主体区 -->
    <div id="buy-wrap">
        <div class="wrapper">
            <div class="title"><h2>SHOPPING BASKET</h2>
                <p>购物篮</p>
            </div>
            <div class="process clearfix">
                <div class="step">
                  <p class="p1">我的购物篮</p>
                </div>
               <div class="line"></div>
               <div class="step2">
               <p class="p2"> 填写和提交订单信息</p>
               </div>
               <div class="line2"></div>
               <div class="step3">
              <p class="p3">成功提交订单</p>
               </div>
            </div>
           
            <div class="empty">
                <p>购物车空空如也，<a href="/index.html">去逛逛吧~~</a> </p>
            </div>
            <div class="base-container clearfix">
                <ul class="header">
                    <!-- <li class="">
                       <div class="checkbox">
                           <p></p>
                       </div>
                    </li> -->
                    <li>
                        <p>商品</p>
                    </li>
                    <li>
                        <p>属性</p>
                    </li>
                    <li>
                        <p class="number">数量</p>
                    </li>
                    <li>
                        <p>编号</p>
                    </li>
                    <li>
                        <p class="price">单价</p>
                    </li>
                    <li>
                        <p class="total">小计</p>
                    </li>
                    <li>
                        <p>操作</p>
                    </li>
                </ul>

                <div class="cart-con">

                </div>
                

               
               
    <script type="text/html" id="prodListTemplate"> 
        <li class="quanxuan">
            <div class="checkbox checkAll {{checkAll ? 'checked' : ''}}">
                <p>全选</p>
            </div>
         </li>
        {{each list item}}
        <div class="footer">
        <li class="first">
            <div class="checkbox {{item.isChecked ? 'checked' : ''}}"></div>
            
            <a href="/html/details.html?id={{item.id}}">
                <img src="{{item.image}}" alt="">
            </a>
            </li>
            <li>
                <p class="name">{{item.title}}</p>
            </li>
            <li>
                <p>免费赠送5份餐具</p>
            </li>
            <li class="cal">
            <p prodId="{{item.id}}">
                <button class="cartReduce">-</button>
                <input type="text" value="{{item.count}}"  class="val countBox"/>
                <button class="btn-add cartAdd">+</button>
            </p>
            </li>
            <li class="guige">
                <p>{{item.id}}</p>
            </li>
            <li  class="money">
                <p>￥{{item.price}}</p>
            </li>
            <li class="youhui">
                <p>￥{{(item.price * item.count).toFixed(2)}}</p>
            </li>
            <li  class="del">
                <button type="button" class="btn btn-del btn-danger btn-sm">删除</button>
            </li>
        </div>
        {{/each}}
    </script>
               <div class="all">
                   <!-- <div class="left checkbox checkAll checked"> <p>全选</p></div> -->
                   <div class="right">
                       <p>已选 <span class="num allCount">0</span> 件商品</p>
                       <div class="tips">(不包含运费)</div>
                       <div class="total">
                           <span class="class
                           gong">共</span>
                           <span class="dollar">￥</span>
                           <span class="money allPrice">0.00</span>
                       </div>
                        <button type="button" class="btn btn-danger">去结算</button>
                   </div>    
               </div>


            </div>
        </div>
    </div>
    <div class="delete">
        删除成功！
    </div>
<!-- 底部 -->
<footer></footer>

<script src="/lib/requirejs/require.js" data-main="/js/basket"></script>
  
</body>
</html>